<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="./css/common.css" rel="stylesheet">
    <link href="./css/index.css" rel="stylesheet">
    <link href="./css/props-table.css" rel="stylesheet">
    <link href="./css/gitLog.css" rel="stylesheet">
</head>
<body>
<div class="index-page">
    <div class="banner">
        <div class="banner-title" id="banner-title"></div>
        <div class="banner-desc" id="banner-desc"></div>
    </div>
    <div class="content">
        <div class="side">
            <div class="side-container" id="side-container"></div>
        </div>
        <div class="example-container">
            <div class="base-container" id="base-container"></div>
            <div class="info-container" id="info-container"></div>
            <div class="props-container" id="props-container"></div>
            <div class="slot-container" id="slot-container"></div>
            <div class="event-container" id="event-container"></div>
            <div class="git-log-container" id="git-log-container"></div>
        </div>
    </div>
</div>
</body>
<script src="../config.js"></script>
<script src="./js/index.js"></script>
<script src="./js/util.js"></script>
<script src="./vueGitLogOut.js"></script>
<script src="./vuePropsOut.js"></script>
<script src="./js/init.js"></script>
<script src="./js/gitLog.js"></script>
<script src="./js/side.js"></script>
<script>
    // 属性容器
    const propsContainer = document.getElementById('props-container');
    // 插槽容器
    const slotContainer = document.getElementById('slot-container');
    // 事件容器
    const eventContainer = document.getElementById('event-container');

    // 属性表格标题头
    const propsTableHeads = ['参数', '说明', '类型', '默认值']
    if (config.showOptional) {
        propsTableHeads.push('可选值')
    }

    /**
     * 构建函数（用于构建属性表格）
     * @param {string} title 标题
     * @param {string} field 属性名
     * @param {Function} relFun 解析方法
     * @param {HTMLElement} containerDom 容器dom
     * @param {string[]} heads 属性表格表头
     */
    function buildFun(title, field, relFun, containerDom, heads) {
        const titleContainerDom = buildExTitle(title)

        const moduleName = vueNames[currentSideIndex]
        const props = vueMap[moduleName][field]
        const tableList = relFun(props)
        if (containerDom.children && containerDom.children[0]) {
            containerDom.innerHTML = ''
        }
        if (tableList && tableList.length > 0) {
            const propsTableDom = buildPropsTable(heads, tableList)
            containerDom.append(titleContainerDom, propsTableDom)
        }
    }

    global.start((that) => {
        // 构建属性
        that.buildProps = function buildProps() {
            buildFun('属性（Props）', 'props', relPropsToTableList, propsContainer, propsTableHeads)
        }
        // // 构建插槽
        that.buildSlot = function buildSlot() {
            buildFun('插槽（Slot）', 'slots', relSlotsToTableList, slotContainer, ['名称', '说明'])
        }
        // 构建事件
        that.buildEvent = function buildEvent() {
            buildFun('事件（Event）', 'emits', relEventsToTableList, eventContainer, ['事件名', '说明', '参数'])
        }
    })

    global.buildProps()
    global.buildSlot()
    global.buildEvent()
</script>
</html>
